:host {
  display: block;
}

.notification {
  position: relative;
  border-radius: var(--bl-border-radius-m);
  box-shadow: 0 5px 30px 0 rgba(39 49 66 / 25%);
}

.duration {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: var(--bl-size-2xs);
  width: 100%;
}

.duration > .remaining {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: var(--bl-border-radius-s);
  border-start-start-radius: 0;
  animation-name: to-zero;
  animation-duration: var(--duration, 7s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.notification:hover .duration > .remaining {
  animation-play-state: paused;
}

@keyframes to-zero {
  to {
    width: 0;
  }
}

.notification[variant="success"] .duration > .remaining {
  background-color: var(--bl-color-success);
}

.notification[variant="warning"] .duration > .remaining {
  background-color: var(--bl-color-warning);
}

.notification[variant="danger"] .duration > .remaining {
  background-color: var(--bl-color-danger);
}

.notification[variant="info"] .duration > .remaining {
  background-color: var(--bl-color-info);
}
